<template>
	<view class="gui-scroll-body gui-flex gui-rows gui-nowrap">
		<!-- #ifdef APP-NVUE -->
		<view class="gui-scroll-msg gui-scrolling" ref="guiscrollbody"
		:style="{marginLeft:ml+'px'}">
			<slot></slot>
		</view>
		<!-- #endif -->
		<!-- #ifndef APP-NVUE -->
		<view class="gui-scroll-msg gui-scrolling" 
		:style="{'animation-duration':speed+'s'}">
			<slot></slot>
		</view>
		<!-- #endif -->
	</view>
</template>
<script>
// #ifdef APP-NVUE
const dom = weex.requireModule('dom');
// #endif
export default {
	props:{
		speed : {type:Number, default:12}
	},
	data() {
		return {
			ml: 0
		}
	},
	// #ifdef APP-NVUE
	created:function(){
		this.getRefs('guiscrollbody', 0 , (ref)=>{
			setTimeout(()=>{
				dom.getComponentRect(ref, (res) => {
					this.animate(res.size.width);
				});
			}, 200);
		});
	},
	methods:{
		getRefs : function(ref, count, fun){
			if(count >= 30){return null;}
			var refReturn = this.$refs[ref];
			if(refReturn){
				fun(refReturn);
				return;
			}else{
				count++;
				setTimeout(()=>{
					this.getRefs(ref, count, fun);
				}, 50);
			}
		},
		animate : function (w) {
			if(this.ml <= w*-1){
				this.ml = w*0.8;
			}else{
				this.ml = this.ml - 1;
			}
			setTimeout(()=>{
				this.animate(w);
			}, this.speed);
		}
	}
	// #endif
}
</script>
<style scoped>
.gui-scroll-body{overflow:hidden;}
/* #ifndef APP-NVUE */
.gui-scrolling{animation:graceScrollingx 12s linear infinite;}
@keyframes graceScrollingx{ 0% { transform:translateX(60%); } 100% { transform: translateX(-100%); }}
/* #endif */
</style>